<template>
  <div>
    <div class="iot_right">
    <div class="iot_log_box">
        <div class="iot_login_all">
            <div>
                <div class="iot_login_title">
                    <span class="iot fa fa-flag " style="color: red;margin-left: -120px;margin-top: 7px"></span>
                    <p>教务管理系统</p>
                </div>
                <div class="iot_login_shiftofbutton" id="iot_login_shiftofbutton" >
                     <p @click="shiftlogin">切换登录</p>
                </div>
            </div>
               <div class="active" id="iot_login">
                  
                  <div class="iot_login_button">
                      <input name="user" type="text" placeholder="学号/工号" id="iot_user" style="text-align: center;font-size: 15px;">
                      <input name="psw" type="password" placeholder="密码" id="iot_uesr_psd" style="text-align: center;font-size: 15px;">
                      <div class="iot_student">
                          <input name="identity" type="radio" id="student">
                      <label>学生</label>
                      </div>
        
                      <div class="iot_teacher">
                          <input name="identity" type="radio" id="teacher">
                      <label>教师</label>
                      </div>
                      <!-- input中radio单选框如何产生互斥效果:给每个input添加相同的name属性，这样表单提交时只能选择一个 -->
                      <div class="iot_login_findpsd">
                          <a href="https://jiaowu.sicau.edu.cn/web/web/web/Looking_pwd.htm" style="font-family: 楷体;font-size: 14px;color: #555555">密码找回</a>
                      </div>
        
        
        
                     
                   <button name="submit" type="submit" id="iot_login_button" @click="login">登录</button>
                      
                  </div>
               </div><!-- 登录-->
               <div class="" id="iot_login_qrcode">
                <div class="iot_smicon"></div>
                <span class="span1">打开手机微信</span>
                <span class="span2">扫一扫登录</span>
               </div>
        </div>
    </div>
   
    
       <div class="iot_convenient_inquiry">
          <div class="iot_convenient_inquiry_title">
              <p>便捷查询</p>
          </div>
           <div>
               <ul class="iot_convenient_inquiry_ul">
					<li>
						<a href="http://jiaowu.sicau.edu.cn/web/web/lanmu/kao.asp" target="_blank"><font color="black"><span class="iot fa fa-book"></span>考试查询</font></a>
					</li>

					<li>
						<a href="http://jiaowu.sicau.edu.cn/web/web/lanmu/tklist.asp" target="_blank"><font color="black"><span class="iot fa fa-clock-o"></span>调停课查询</font></a>
					</li>

					<li>
						<a href="../js_kb_cha/jshi_yk_1.asp" target="_blank"><font color="black"><span class="iot fa fa-eye"></span>今日有课教室</font></a>
					</li>


					<li>
						<a href="http://jiaowu.sicau.edu.cn/web/web/lanmu/jshi.asp" target="_blank"><font color="black"><span class="iot fa fa-apple"></span>当期课表查询</font></a>
					</li>


					<li>
						<a href="gw_jingsai.asp"  target="_blank"><font color="black"><span class="iot fa fa-edit"></span>各类竞赛通知</font></a>
					</li>

					<li>
						<a href="https://jiaowu.sicau.edu.cn/jiaoshi/fuxiu/zsjz.asp"  target="_blank"><font color="black"><span class="iot fa fa-dedent"></span>辅修招生简章</font></a>
					</li>


				</ul>
           </div>
       </div><!-- 便捷查询-->
   </div><!--登录和便捷查询-->
   <div class="iot_login_image">
    
   </div>
  </div>
</template>

<script>
export default {
   name:'LoginAndConvenient',
   data() {
    return {
        n:0
    }
   },
   methods: {
    shiftlogin(){
        var qrcode=document.querySelector("#iot_login_qrcode");
        var log=document.querySelector("#iot_login");
        
            this.n+=1
            //n为奇数:显示二维码
            if(this.n%2!=0){
             qrcode.style.display='block';
             log.style.display='none';
            }
            //n为偶数:显示登录页面
            if(this.n%2==0){
             qrcode.style.display='none';
             log.style.display='block';
            }
    },
    login(){
        var user=document.getElementById('iot_user').value;
     var psw=document.getElementById('iot_uesr_psd').value;
     var student=document.getElementById('student');
     var teacher=document.getElementById('teacher');
     if (student.checked==false && teacher.checked==false){
      alert('请选择登录类别“学生”或“教师”！');
     }
     else{
       if ((user == null || user == "") || (psw == null || psw == "")) {
      alert("用户名或密码不能为空！！");
  }
  else{
    if (user=='202205840'&&psw=='QAZWSX123321'){
        window.location.href="https://jiaowu.sicau.edu.cn/jiaoshi/bangong/main/index1.asp";

     }
     else {
      alert("用户名或密码错误！！");
      document.getElementById('iot_user').value="";
      document.getElementById('iot_uesr_psd').value="";

  }
  }
     }
    
     
    }
   },
}
</script>

<style>
    .iot_right{
            width: 220px;
            height: 535px;
            float: left;
        } /*  登录和便捷查询  */
        
        .iot_log_box{
            width: 220px;
            height: 226px;
            position: absolute;
           
        }
        .iot_log_box:hover{
            box-shadow: 1px 1px 4px 6px rgba(0, 0, 0, 0.1);
        }
        #iot_login{
            width: 220px;
            height: 190px;
            border: 1px;
            border: 1px solid rgba(0,0,0,0.2);
            position: absolute;
        } /*登录*/
        .active{
            display: block;
        }
        #iot_login_qrcode{
            width: 220px;
            height: 200px;
            border: 1px;
            border: 1px solid rgba(0,0,0,0.2);
            position: absolute;
            background-color: #ffffff;
            background-image: url('../images/下载.png');
            background-repeat: no-repeat;
            background-size: 130px 130px;
            background-position: top 15px left 45px;
            display: none;
        }
        .iot_smicon{
            width: 40px;
            height: 40px;
            position: absolute;
            background-image: url('../images/smicon.png');
            background-repeat: no-repeat;
            background-size: contain;
            top: 150px;
            left: 40px;
            

        }
        .span1{
             position: relative;
             top: 150px;
             left: 90px;
             font-size: 13px;
             color: #5cb85c;
        }
        .span2{
            position: relative;
             top: 170px;
             left: 10px;
             font-size: 13px;
             color: #5cb85c;
        }
        .iot_login_image{
           width: 200px;
           height: 200px;
            margin-left: 1066px;
            margin-top: 36px;
            left: 100px;
         
            background-repeat:no-repeat;
            background-size: 200px 150px;
            position: fixed;
            display: none;
        }
        .iot_login:hover{
            box-shadow: 1px 1px 4px 6px rgba(0, 0, 0, 0.1);
            /*左右偏移、上下偏移、模糊距离、阴影尺寸、颜色*/
        }
        
        .iot_login_title{
            width: 220px;
            height: 35px;
            background-color: #f1f1f1;
        }
        .iot_login_title>p{
             float: left;
          height: 35px;
          line-height: 35px;
          padding: 0px 0px 0px 20px;
          margin-left: 20px;
          color: #000000;
          cursor: pointer; /*光标显示样式*/
          font-size: 16px;
          font-weight: bold;
        }
        .iot_login_shiftofbutton{
            width: 60px;
            height: 35px;
            float: right;
            margin-right: 4px;
            margin-top: -26px;
        }
        .iot_login_shiftofbutton:hover{
             cursor: pointer; /*光标显示样式*/
             color: #e75b5b;
        }
        .iot_login_shiftofbutton>p{
           text-align: center;
            font-size: 10px;
            border: 1px solid rgba(0,0,0,0.2);
        }
        #iot_user{
            width: 190px;
            height: 30px;
            margin-top: 20px;
            margin-left:15px;
            border: 1px solid rgba(0,0,0,0.2);
            background-color: #e8f0fe;

        }
        #iot_uesr_psd{
            width: 190px;
            height: 30px;
            margin-top: 15px;
            margin-left: 15px;
            border: 1px solid rgba(0,0,0,0.2);
            background-color: #e8f0fe;

        }
        .iot_student{
            position: absolute;
            margin-left: 20px;
            margin-top: 10px;
            font-family: 楷体;
        }
        .iot_teacher{
            position: absolute;
            margin-top: 10px;
            margin-left: 80px;
            font-family: 楷体;
        }
        .iot_login_findpsd{
            float: left;
            position: absolute;
            margin-left: 145px;
            margin-top: 8px;
        }
        .iot_login_findpsd:hover{
            border-bottom: 1px solid black;
        }
        #iot_login_button{
            margin-left: 30px;
            margin-top: 40px;
            color: white;
            width: 160px;
            height: 30px;
            background-color: #5cb85c;
            border: 1px solid rgba(0,0,0,0.2);
        }
        #iot_login_button:hover{
            cursor: pointer; /*光标显示样式*/
            background-color:  #39ae39;
        }
        .iot_convenient_inquiry{
            position: relative;
            width: 220px;
            height:311px;
            border: 1px;
            margin-top: 244px;
        } /*便捷查询*/
        .iot_convenient_inquiry:hover{
             box-shadow: 1px 1px 4px 6px rgba(0, 0, 0, 0.1);
            /*左右偏移、上下偏移、模糊距离、阴影尺寸、颜色*/
        }
        .iot_convenient_inquiry_title{
            width: 221px;
            height: 45px;
             background-color: #f1f1f1;
            border-right: 1px solid rgba(0,0,0,0.2);
            border-left: 1px solid rgba(0,0,0,0.2);
            border-top: 1px solid rgba(0,0,0,0.2);
            border-bottom: 1px solid rgba(0,0,0,0.2);
        }
        .iot_convenient_inquiry_title>p{
             float: left;
          height: 35px;
          line-height: 35px;
          padding: 0px 0px 0px 20px;
          margin-left: 10px;
          color: #000000;
          cursor: pointer; /*光标显示样式*/
          font-size: 16px;
          font-weight: bold;
        }
        .iot_convenient_inquiry_ul{
            list-style: none;
            float: left;
            height: 260px;
            width: 220px;
            line-height: 43px;
            font-size: 14px;
            border-right: 1px solid rgba(0,0,0,0.2);
            border-left: 1px solid rgba(0,0,0,0.2);
            border-top: 1px solid rgba(0,0,0,0.2);
            border-bottom: 1px solid rgba(0,0,0,0.2);
        }
        .iot_convenient_inquiry_ul>li{
           border-bottom: 1px solid rgba(0,0,0,0.2);
        }
        .iot_convenient_inquiry_ul>li:hover span[class^="iot fa fa-"]{
          font-size: 40px;
        }

         span[class^="iot fa fa-"] {
             margin-left: 20px;
             margin-right: 20px;
             font-size: 20px;
         }
</style>